<template>
  <div ref="container" class="container">

  </div>
</template>

<script>
//引入echarts插件
import * as echarts from 'echarts';

export default {
  name: "EcharsZhuZhuangTu",
  data(){
    return{
      title:'商品分类数据柱状图'
    }
  },
  //挂载静态echarts图像
  mounted() {
    //Vue中使用ref获取DOM实例对象，初始化echarts实例
    var myChart = echarts.init(this.$refs.container);
    // 绘制图表
    myChart.setOption({
      title: {
        text: this.title
      },
      tooltip: {},
      xAxis: {
        data: ['周一','周二','周三','周四','周五','周六','周日']
      },
      yAxis: {},
      series: [
        {
          name: '上两周',
          type: 'bar',
          data: [10, 20, 36, 15, 43, 56,10]
        },
        {
          name: '本一周',
          type: 'bar',
          data: [2, 6, 7, 10, 13, 15,9],

        }
      ]

    });
  }

}
</script>

<style scoped>
.container {
  height: 30vh;
  width: 100%;
}
</style>